<template>
    <section class="integra-good-box ">
      <div class="box mt10 bgcFFF" v-if="integralData.length > 0" v-for="(item,index) in integralData" :key="index">
        <p class="order-no text-l fs14 color7A7B82 pdlr15">
          订单号：{{item.orderNum}}
          <span class="flr colorB989F4">待发货</span>
        </p>
        <div class="product-box pdlr15" v-for="(val,num) in item.goodList" :key="num">
          <img :src="val.imgPath" alt="">
          <div class="msg inline-block pr">
            <p class="name fs14">{{val.goodName}}</p>
            <p class="model fs12 color999AA3">{{val.goodModel}}</p>
            <p class="num pa fs14">{{val.point}} <i>积分</i> <span class="flr">x {{val.goodNum}}</span></p>
          </div>
          <p class=""></p>
        </div>
        <p class="subtotal fs14 color45454D text-r pdlr15">
          共{{item.totalGoodNum}}件商品&nbsp;&nbsp; 小计:
          <span class="fs16 colorF54E4E">{{item.totalPoint}}</span><i class="fs12 colorF54E4E">积分</i>
        </p>
        <p class="btn pdlr15 line-top bgcFFF text-r">
          <span class="inline-block text-c color45454D fs14" @click="operationLogistics(item)">查看物流</span>
          <span class="inline-block text-c color45454D fs14" @click="confirmOrder(item)">确认收货</span>
        </p>
      </div>

      <div class="none text-c" v-if="integralData.length <= 0">
        <!--<img src="../assets/img/icon_none_order.png" alt="">-->
        <img src="../assets/img/icon_none_car.png" alt="">
        <p class="fs14">没有相关订单</p>
        <p class="fs14">快去挑几件喜欢的商品吧</p>
        <p class="text-c btn">
          <span class="inline-block text-c" @click="toIntegral">去逛逛</span>
        </p>
      </div>
    </section>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {

      }
    },
    props:['integralData'],
    methods: {
      operationLogistics(item){
        this.$emit('operationlogistics',item)
      },
      confirmOrder(item){
        this.$emit('confirmorder',item)
      },
      toIntegral(){
        this.$emit('tointegral')
      },
    },
  }
</script>

<style scoped lang="scss">
  @import '../assets/css/base.scss';

  .integra-good-box{
    width: 100%;
    height:auto;

    .box{
      width: 100%;
      height:auto;

      .order-no{
        width: 100%;
        height: 40px;
        line-height: 40px;
      }

      .product-box{
        background-color: #F7F8FA;
        width: 100%;
        height: 104px;
        padding:12px 15px;
        box-sizing: border-box;

        img{
          width: 80px;
          height: 80px;
          vertical-align: top;
        }

        .msg{
          width: calc(100% - 85px);
          height: 100%;
          padding-left: 6px;
          box-sizing: border-box;

          .num{
            bottom: 0;
            left: 6px;
            width: 99%;

            i{
              font-style: normal;
              font-size: 11px;
            }
          }
        }
      }

      .subtotal{
        width: 100%;
        height: 44px;
        line-height: 44px;

        i{
          font-style: normal;
        }
      }

      .btn{
        width: 100%;
        height: 44px;
        line-height: 44px;

        span{
          width: 80px;
          height: 28px;
          line-height: 28px;
          border: 1px solid #999AA3;
          border-radius: 16px;
        }

        span:last-child{
          margin-left: 2px;
        }
      }


    }

    .none{

      img{
        width: 95px;
        height: 89px;
        margin-top: 122px;
      }

      p{
        color: #757575;

        span{
          background-color: #fff;
          width: 100px;
          height: 36px;
          line-height: 36px;
          border:1px solid #7E82F6;
          border-radius: 18px;
        }
      }

      .btn{
        margin-top: 16px;
      }
    }
  }
</style>
